import React, {useState} from 'react';
import {Button, Form, Input, Modal} from "antd";
import './style/batchOperation.scss'
import Search from "antd/es/input/Search";
import TextArea from "antd/es/input/TextArea";
import SonTable from './son_table'
import SonTableVip from './son_vipTable'
import SonFreeze from './son_freeze'

const BatchOperation = () => {
    //--------选择标签
    const [isSelect, setIsSelect] = useState(false);
    const [isIntegral, setIsIntegral] = useState(false);
    const [isSonTable, setIsSonTable] = useState(false);
    const [isSonTableVip, setIsSonTableVip] = useState(false);
    const [isFreeze, setFreeze] = useState(false);

    const onFinish = (values: any) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    const showModal = () => {
        setIsSelect(true);
    };

    const handleSelect = () => {
        setIsSelect(false);
    };

    const handleCancelSelect = () => {
        setIsSelect(false);
    };

    //--------------------

    const showModal_Integral = () => {
        setIsIntegral(true);
    };

    const handleSelect_Integral = () => {
        setIsIntegral(false);
    };

    const handleCancelSelect_Integral = () => {
        setIsIntegral(false);
    };

    //--------------------

    const showModal_SonTable = () => {
        setIsSonTable(true);
    };

    const handleSelect_SonTable = () => {
        setIsIntegral(false);
    };

    const handleCancelSelect_SonTable = () => {
        setIsSonTable(false);
    };

    //--------------------

    const showModal_SonTableVip = () => {
        setIsSonTableVip(true);
    };

    const handleSelect_SonTableVip = () => {
        setIsSonTableVip(false);
    };

    const handleCancelSelect_SonTableVip = () => {
        setIsSonTableVip(false);
    };

    //--------------------

    const showModal_Freeze = () => {
        setFreeze(true);
    };

    const handleSelect_Freeze = () => {
        setFreeze(false);
    };

    const handleCancelSelect_Freeze = () => {
        setFreeze(false);
    };

    //--------------------

    return (
        <div className='baatchMain'>

            <Button onClick={showModal}>打标签</Button>
            <Button onClick={showModal_Integral}>修改积分</Button>
            <Button onClick={showModal_SonTable}>送优惠卷</Button>
            <Button onClick={showModal_SonTableVip}>开通会员</Button>
            <Button onClick={showModal_Freeze}>冻结</Button>

            <>
                <Modal title="选择标签" open={isSelect} onOk={handleSelect} onCancel={handleCancelSelect}>
                    <div className='baatchMain__inp'>
                        <Search placeholder="input search text" style={{ width: 200 }} />
                    </div>
                    <div className='baatchMain__btn'>
                        <Button>高消费用户</Button>
                        <Button>新手妈妈</Button>
                        <Button>数码达人</Button>
                        <Button>大学生</Button>
                        <Button>大促敏感用户</Button>
                        <Button>晚间活跃用户</Button>
                    </div>
                </Modal>

                <Modal title="修改积分" footer={[]} open={isIntegral} onOk={handleSelect_Integral} onCancel={handleCancelSelect_Integral}>
                    <Form
                        name="basic"
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        style={{ maxWidth: 600 }}
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="修改积分"
                            name="alterIntegral"
                            rules={[{ required: true, message: 'Please input your Integral!' }]}
                        >
                            <Input />
                            <p style={{fontSize: 12, color: '#bdbdbd'}}>输入100，表示增加100，输入-100，表示减少100</p>
                        </Form.Item>

                        <Form.Item
                            label="原因"
                            name="cause"
                            rules={[{ required: true, message: 'Please input your cause!' }]}
                        >
                            <TextArea rows={4} placeholder="请输入"  />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                提交
                            </Button>
                        </Form.Item>
                    </Form>
                </Modal>

                <Modal title="选择优惠劵" width={716} footer={[]} open={isSonTable} onOk={handleSelect_SonTable} onCancel={handleCancelSelect_SonTable}>
                     <SonTable />
                </Modal>

                <Modal title="设置会员等级" open={isSonTableVip} onOk={handleSelect_SonTableVip} onCancel={handleCancelSelect_SonTableVip}>
                    <SonTableVip />
                </Modal>

                <Modal title="冻结限制行为" open={isFreeze} onOk={handleSelect_Freeze} onCancel={handleCancelSelect_Freeze}>
                    <SonFreeze />
                </Modal>
            </>
        </div>
    );
};

export default BatchOperation;